<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-23 14:05:56
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 20:01:59
-->
<template>
  <div class="tynx">
    <el-checkbox-group v-model="selectedAge" @change="selectAge">
      <el-checkbox v-for="item in options" :key="item.key" :label="item.key">
        <div class="checkbox-content">
          <span class="color-box" :style="{ background: `#${item.color}` }"></span>
          <span class="text">{{ item.label }}</span>
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'DeviceAge',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    options: Array
  },
  data() {
    return {
      selectedAge: ['0', '1', '2', '3'] // 图例表格选中的数据
    };
  },
  watch: {
    show(val) {
      if (val) {
        this.selectedAge = ['0', '1', '2', '3'];
      }
    }
  },
  methods: {
    // 切换设备年限选中状态
    selectAge() {
      this.$emit('selectAge', this.selectedAge);
    }
  },
  mounted() {}
};
</script>

<style scoped>
.tynx {
  position: fixed;
  left: 310px;
  top: 10px;
  width: 200px;
  z-index: 1;
}
.el-checkbox {
  margin-bottom: 5px;
}
.color-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.text {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  font-weight: 900;
}
</style>
